<template>
  <x-tab class="todo-list" :title="'待办概览'" :isShowExpand="false">
    <div class="flex-row todo-content">
      <div
        class="todo-item flex-row"
        :class="['todo-item', 'flex-row', index > 3 ? 'no-bottom' : '', index / 3 === 1 ? 'no-right' : '']"
        v-for="(item, index) in todoList"
        :key="index"
        :style="{ 'background-color': item.backColor }"
        @click="handleClickItem(item)"
      >
        <img :src="getImageUrl(item.imgName)" class="todo-img" />
        <div class="flex-column todo-title-info">
          <span class="todo-title">
            {{ item.name }}
          </span>
          <span class="todo-count">
            {{ item.count }}
          </span>
        </div>
      </div>
    </div>
  </x-tab>
</template>
<script>
  import { apiGetSupplierOverview } from '../api'

  export default {
    name: 'Todo',
    data() {
      return {
        todoList: [
          {
            name: '待处理询价',
            count: 0,
            imgName: 'todo',
            attrName: 'enquiryNum',
            backColor: '#3AD7B425'
          },
          {
            name: '待确认定价单',
            count: 0,
            attrName: 'pricingNum',
            imgName: 'toconfirm',
            backColor: '#4474F625'
          },
          {
            name: '待处理整改通知',
            count: 0,
            attrName: 'rectifyNum',
            imgName: 'todonotice',
            backColor: '#FF993C25'
          },
          {
            name: '待确认采购订单',
            count: 0,
            attrName: 'orderNum',
            imgName: 'toconfirmorder',
            backColor: '#F5524825'
          },
          {
            name: '待确认合同',
            count: 0,
            attrName: 'contractNum',
            imgName: 'toconfirmcontract',
            backColor: '#2D9CDB25'
          },
          {
            name: '待确认对账单',
            count: 0,
            attrName: 'billNum',
            imgName: 'toconfirmaccount',
            backColor: '#BB6BD925'
          },
          {
            name: '待处理开票通知',
            count: 0,
            attrName: 'invoiceNum',
            imgName: 'todoinvoice',
            backColor: '#27AE6025'
          }
        ]
      }
    },
    created() {
      this.getToDoAcount()
    },
    methods: {
      getImageUrl(name) {
        return new URL(`../../../common/assets/images/${name}.png`, import.meta.url).href
      },
      getToDoAcount() {
        apiGetSupplierOverview().then(({ data }) => {
          if (typeof data === 'object') {
            this.todoList = this.todoList.map((v) => {
              return {
                ...v,
                count: data[v.attrName]
              }
            })
          }
        })
      },
      handleClickItem({ attrName }) {
        let path = ''
        const param = {}
        switch (attrName) {
          case 'enquiryNum':
            path = '/searchSource/enquiry'
            // param = {
            //   state: 1 // 报价中
            // }
            break
          case 'pricingNum':
            path = '/searchSource/managePricing'
            // param = {
            //   state: 2 // 定价中
            // }
            break
          case 'rectifyNum':
            path = '/supplierSelf/rectifyInform'
            // param = {
            //   state: 1 // 方案待回复
            // }
            break
          case 'orderNum':
            path = '/orderSynergy/purchaseOrder'
            // param = {
            //   state: 1 // 待确认
            // }
            break
          case 'contractNum':
            path = '/contractSupplier/manageContract'
            // param = {
            //   state: 2 // 待确认
            // }
            break
          case 'billNum':
            path = '/financialSynergy/statementManagement'
            // param = {
            //   state: 2 // 待确认
            // }
            break
          case 'invoiceNum':
            path = '/financialSynergy/invoiceManagement'
            // param = {
            //   state: 2 // 待开票
            // }
            break
        }
        this.$router.push({ path, query: param })
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '../style/home';
</style>
